<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import { ElDatePicker, ElInputNumber } from 'element-plus';

import type { FormDescChild } from '@/components/form-desc/form-desc.vue';
import { COMMITMENT_TYPE_OPTIONS, getEnumOptionsField } from '@/config/enum-options';
import type { components } from '@/genapi/wh';
import {
  whManagerBsTbCommitmentGetEveryDayByCommitIdIdUsingPost,
  whManagerBsTbCommitmentSaveOrUpdateEveryDayUsingPost,
  whManagerBsTbCommitmentSaveOrUpdateUsingPost,
} from '@/genapi/wh';
import { useAsync } from '@/hooks/use-async';
import { useCompanyStore } from '@/stores/company';
import { toDayjs } from '@/utils/to-dayjs';

import { injectState } from '../state';
import { ref } from 'vue';

defineOptions({ name: 'DetailDialog' });

const companyStore = useCompanyStore();

const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents['PromiseDialog']>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents['FormDesc']>>();

const type = ref<'write' | 'read'>();

const beforeClose = async () => {
  if (type.value === 'write') {
    await ElMessageBox.confirm('确认关闭？');
  }
};

const trigger = async (_type: 'write' | 'read' = 'read', value = {} as any) => {
  type.value = _type;
  model.value = JSON.parse(JSON.stringify(value)) as any;
  if (value.id && `${value.type}` === '1') {
    //TODO 返回空
    const { data } = await whManagerBsTbCommitmentGetEveryDayByCommitIdIdUsingPost({
      path: {
        id: value.id,
      },
    });
    if (data) {
      model.value = data as any;
      model.value.type = '1'
    }
  }
  await dialogRef.value?.open();
};

defineExpose({
  trigger,
});

const model = ref<components['schemas']['TbCommitmentDuiXiang']>({} as any);

const timeRange = computed({
  get() {
    if (model.value.commitEndDate) {
      return [model.value.commitStartDate, model.value.commitEndDate];
    }
  },
  set(value) {
    model.value.commitStartDate = value?.[0];
    model.value.commitEndDate = value?.[1];
  },
});
let commitment = ref('')
const getTitle = () => {
  // const commitment = getEnumOptionsField(COMMITMENT_TYPE_OPTIONS, 'label', model.value.type);
  // console.log(commitment)
  // const commitment = () => {
  // }
  if(model.value.type == '1'){
    commitment.value = '每日安全承诺'
  }else if(model.value.type == '2'){
    commitment.value = '年初承诺'
  }else if(model.value.type == '3'){
    commitment.value = '年度履诺报告'
  }


  if (type.value === 'write') {
    return (model.value.id ? '编辑' : '新增') + commitment.value;
  } else {
    return `${commitment.value}详情`;
  }
};

const { execute, isLoading } = useAsync(async () => {
  await formDescRef.value?.formRef?.validate();
  await ElMessageBox.confirm('确认提交？', '提示', {
    type: 'warning',
  });
  if (`${model.value.type}` === '1') {
    timeRange.value ??= [toDayjs().format('YYYY-MM-DD'), toDayjs().format('YYYY-MM-DD')];
    await whManagerBsTbCommitmentSaveOrUpdateEveryDayUsingPost({
      data: {
        ...model.value,
        enterpriseId: companyStore.currentCompanyId,
      },
    });
  } else {
    whManagerBsTbCommitmentSaveOrUpdateUsingPost({
      data: {
        ...model.value,
        enterpriseId: companyStore.currentCompanyId,
      },
    });
  }
  ElMessage.success('提交成功');
  page.execute();
  dialogRef.value?.complete();
});
const children: FormDescChild[] = [
  {
    label: '特级动火作业',
    prop: 'specialNum',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.specialNum}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.specialNum ?? '-'}处`,
  },
  {
    label: '一级动火作业',
    prop: 'level1Num',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.level1Num}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.level1Num ?? '-'}处`,
  },
  {
    label: '二级动火作业',
    prop: 'leve2Num',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.leve2Num}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.leve2Num ?? '-'}处`,
  },
  {
    label: '一级重大危险源',
    prop: 'dangerSource1Num',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.dangerSource1Num}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.dangerSource1Num ?? '-'}处`,
  },
  {
    label: '二级重大危险源',
    prop: 'dangerSource2Num',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.dangerSource2Num}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.dangerSource2Num ?? '-'}处`,
  },
  {
    label: '三级重大危险源',
    prop: 'dangerSource3Num',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.dangerSource3Num}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.dangerSource3Num ?? '-'}处`,
  },
  {
    label: '四级重大危险源',
    prop: 'dangerSource4Num',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.dangerSource4Num}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.dangerSource4Num ?? '-'}处`,
  },
  {
    label: '开车装置数',
    prop: 'startEqpNum',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.startEqpNum}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.startEqpNum ?? '-'}处`,
  },
  {
    label: '停车装置数',
    prop: 'stopEqpNum',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.stopEqpNum}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.stopEqpNum ?? '-'}处`,
  },
  {
    label: '检维修套数',
    prop: 'checkEqpNum',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['套']"
        controls={false}
        v-model={model.value.checkEqpNum}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.checkEqpNum ?? '-'}套`,
  },
  {
    label: '检维修作业',
    prop: 'checkEqpWorkNum',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
        controls={false}
        v-model={model.value.checkEqpWorkNum}
        placeholder="请输入"
      />
    ),
    descItem: () => `${model.value.checkEqpWorkNum ?? '-'}处`,
  },
  {
    label: '有无重大隐患',
    prop: 'hasDanger',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 1,
    formItem: () => (
      <ElInputNumber
        controls={false}
        v-model={model.value.hasDanger}
        placeholder="请输入"
        class="after:absolute after:right-8px after:top-1px w-90px! after:content-['处']"
      />
    ),

    descItem: () => `${model.value.hasDanger === '1'? '有':'无'}`,
  },

  {
    label: '企业承诺',
    prop: 'commitDesc',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 3,
    formItem: () => (
      <el-input v-model={model.value.commitDesc} placeholder="请输入" rows={6} type="textarea" />
    ),
    descItem: () => `${model.value.commitDesc ?? '-'}`,
  },
];

const children2 = [
  {
    label: '承诺期限',
    prop: 'commitStartDate',
    rule: [{ required: true, message: '请选择', trigger: 'blur' }],
    span: 3,
    formItem: () => (
      <ElDatePicker
        type="daterange"
        valueFormat="YYYY-MM-DD"
        v-model={timeRange.value}
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    ),
    descItem: () => `${`${model.value?.commitStartDate}--${timeRange.value?.[1]}`}`,
  },

  {
    label: '企业承诺',
    prop: 'commitDesc',
    rule: [{ required: true, message: '请输入', trigger: 'blur' }],
    span: 3,
    formItem: () => (
      <el-input v-model={model.value.commitDesc} placeholder="请输入" rows={6} type="textarea" />
    ),
    descItem: () => `${model.value.commitDesc ?? '-'}`,
  },
];
</script>

<template>
  <PromiseDialog ref="dialogRef" :title="getTitle()" :before-close="beforeClose" w="757px!">
    <el-scrollbar m="r--20px" p="r-20px">
      <FormDesc
        ref="formDescRef"
        :type="type === 'read' ? 'desc' : 'form'"
        :form-props="{ labelPosition: 'right', labelWidth: '130px' }"
        :desc-props="{ direction: 'horizontal' }"
        form-class="gap-x-0"
        :model="model"
        :children="model.type === '1' ? children : children2"
        :column="3"
      />
    </el-scrollbar>
    <template v-if="type === 'write'" #footer>
      <el-button @click="dialogRef?.close()">取消</el-button>
      <el-button type="primary" :is-loading="isLoading" @click="execute()">确认</el-button>
    </template>
  </PromiseDialog>
</template>
